Use the below code to display TabBar
<!-- TabBar Structure -->
<section id="rides-upcoming">
<div id="rides-upcoming-wrap">
<ul class="nav nav-pills order-screen2-tab" id="rides-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active order-screen2-tab-btn" id="active-tab" data-bs-toggle="pill" data-bs-target="#active-ride" type="button" role="tab" aria-selected="true">
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link active order-screen2-tab-btn" id="active-tab" data-bs-toggle="pill" data-bs-target="#active-ride" type="button" role="tab" aria-selected="true">
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link active order-screen2-tab-btn" id="active-tab" data-bs-toggle="pill" data-bs-target="#active-ride" type="button" role="tab" aria-selected="true">
</button>
</li>
</ul>
<div class="tab-content container" id="pills-tabContent">
<div class="tab-pane fade show active" id="active-ride" role="tabpanel" tabindex="0">
...
</div>
<div class="tab-pane fade" id="upcoming" role="tabpanel" tabindex="0">
...
</div>
<div class="tab-pane fade" id="history" role="tabpanel" tabindex="0">
...
</div>
</div>
</div>
</section>